<template>
  <div class="app-main-container">
    <QueryForm
      v-model="filters"
      :query-form-config="queryFormConfig"
      @handleQuery="getSiteList(1)"
      @clear="clearList"
    />
    <el-table
      ref="table"
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      :header-row-class-name="'table-header'"
      class="doumee-element-table doumee-element-tableb"
    >
      <el-table-column
        align="center"
        label="订单号"
        prop="orderId"
        width="220"
      />
      <el-table-column align="center" label="订单详情" prop="name" min-width="400" show-overflow-tooltip>
        <template slot-scope="scope">
          <div v-for="item in scope.row.siteList" :key="item.id">
            {{
              item.projectName + '-' +
                item.siteModelName +
                " " +
                item.day +
                item.beginTime +
                "~" +
                item.endTime +
                " " +
                "原价：" +
                item.price +
                " " +
                "折后价：" +
                item.memberPrice
            }}
          </div>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单总时长"
        prop="orderAllTime"
        show-overflow-tooltip
        min-width="120"
      />
      <el-table-column
        align="center"
        label="原价总价"
        prop="allPrice"
        show-overflow-tooltip
        min-width="100"
      />
      <el-table-column
        align="center"
        label="折后总价"
        prop="realPrice"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.realPrice || scope.row.realPrice === 0 || scope.row.realPrice === '0'? scope.row.realPrice : scope.row.allPrice }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="订单来源"
        show-overflow-tooltip
        prop="channelType"
        min-width="100"
      >
        <template slot-scope="scope">
          {{ scope.row.channelType == "01" ? "小程序" : "场馆PC端" }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        label="支付方式"
        prop="payMethed"
        show-overflow-tooltip
        min-width="100"
      >
        <template slot-scope="scope">
          {{
            nameWithPayMethod(scope.row.payMethed)
          }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="预定人" min-width="160" show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{
            scope.row.userType == "0"
              ? scope.row.memberName + " " + scope.row.memberPhone
              : scope.row.userName + " " + scope.row.userPhone
          }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="备注" min-width="200" prop="remarks" show-overflow-tooltip />
      <el-table-column
        align="center"
        label="操作员"
        min-width="120"
        show-overflow-tooltip
        prop="creatorName"
      />
      <el-table-column
        align="center"
        label="创建时间"
        show-overflow-tooltip
        min-width="160"
        prop="createTime"
      />
      <el-table-column
        label="支付状态"
        prop="sort"
        min-width="100"
        show-overflow-tooltip
        align="center"
        fixed="right"
      >
        <template slot-scope="scope">
          {{
            scope.row.status == 0
              ? "未支付"
              : scope.row.status == 1
                ? "过期未付"
                : scope.row.status == 2
                  ? "已取消"
                  : scope.row.status == 3
                    ? "已支付"
                    : scope.row.status == 4
                      ? "退款中"
                      : scope.row.status == 5
                        ? "退款成功"
                        : "-"
          }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="290" align="center" fixed="right">
        <template slot-scope="scope">
          <div class="flex-cc">
            <!-- <el-button
                v-if="scope.row.status != 0 && scope.row.status != 3"
                type="text"
               class="secondColor"
                @click="deletelBtn(scope.row)"
              >删除</el-button> -->
            <el-button
              v-if="scope.row.status == '0'"
              v-preventReClick
              type="text"
              @click="getOrderType(scope.row.orderId)"
            >查询支付状态</el-button>
            <el-button
              v-if="scope.row.status == 0 && meta.indexOf('SiteOrderPayCon') > -1"
              v-preventReClick
              type="text"
              @click="paymentShow(scope.row)"
            >继续支付</el-button>
            <el-button
              v-if="scope.row.status == 0 && meta.indexOf('SiteOrderPayCan') > -1"
              v-preventReClick
              type="text"
              @click="cancelBtn(scope.row)"
            >取消预定</el-button>
            <el-button
              v-if="scope.row.status == 3 && meta.indexOf('SiteOrderCan') > -1"
              v-preventReClick
              type="text"
              @click="unsubscribeOrderBtn(scope.row)"
            >场地退订</el-button>
            <el-button
              v-if="scope.row.status == 3"
              v-preventReClick
              type="text"
              @click="printOrder(scope.row.orderId)"
            >打印小票</el-button>
            <span v-if="scope.row.status == 2 || scope.row.status > 3 || scope.row.status == 1">-</span>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="flex-cc doumee-pagination">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="total"
          :current-page.sync="pagination.page"
          hide-on-single-page
          @current-change="getSiteList"
        />
      </div> -->
    <Paginations :total="total" :page="pagination.page" :page-size="pagination.rows" @current-change="getSiteList" @SizeChange="handleSizeChange" />
    <orderDialog ref="child" @orderSuccess="getSiteList" />
  </div>
</template>

<script>
import { parseTime } from '@/utils/index'
import { printOrder, orderType, allConfigList, siteOrderListPc, cancelReserve, unsubscribeOrder, deleteUserReserveRecord } from '@/api'
import orderDialog from '@/components/order'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'OrderList',
  components: {
    orderDialog, QueryForm
  },
  data() {
    return {
      authCode: '',
      queryFormConfig: {
        formItems: [{
          filed: 'orderId',
          type: 'input',
          label: '订单号',
          placeholder: '请输入订单号',
          clearable: true
        }, {
          filed: 'userInfo',
          type: 'input',
          label: '姓名/手机号',
          placeholder: '请输入姓名/手机号',
          clearable: true
        }, {
          filed: 'channelType',
          type: 'select',
          label: '订单来源',
          placeholder: '请选择订单来源',
          clearable: true,
          options: [
            { value: '01', label: '小程序' },
            { value: '02', label: '场馆PC端 ' }
          ]
        }, {
          filed: 'payMethod',
          type: 'select',
          label: '支付类型',
          placeholder: '请选择支付类型',
          clearable: true,
          options: []
        }, {
          filed: 'payStatus',
          type: 'select',
          label: '订单状态',
          placeholder: '请选择订单状态',
          clearable: true,
          options: [
            { value: '0', label: '未支付' },
            { value: '1', label: '过期未付' },
            { value: '2', label: '已取消' },
            { value: '3', label: '已支付' },
            { value: '4', label: '退款中' },
            { value: '5', label: '退款成功 ' }
          ]
        }, {
          filed: 'editorName',
          type: 'input',
          label: '操作人',
          placeholder: '请输入操作人',
          clearable: true
        }, {
          filed: 'time',
          start: '默认今天',
          end: '默认今天',
          type: 'daterange',
          clearable: true
        }],
        online: true
      },
      list: [],
      pagination: {
        page: 1,
        rows: 10
      },
      total: 0,
      allPayMethedList: [],
      filters: {
        time: [parseTime(new Date()).slice(0, 10), parseTime(new Date()).slice(0, 10)]
      },
      listLoading: true,
      meta: []
    }
  },
  created() {
    this.pdgj()
    this.getSiteList()
    this.meta = this.$route.meta.buttons || []
  },
  activated() {
    this.$refs.table.doLayout()
  },
  methods: {
    nameWithPayMethod(payM) {
      const temp = this.allPayMethedList.find((item) => item.value === payM)
      return temp ? temp.name : '-'
    },
    handleSizeChange(e) {
      this.pagination.rows = e
      this.getSiteList(1)
    },
    getOrderType(orderId) {
      orderType({
        param: {
          orderId
        }
      })
        .then((res) => {
          const str = res.record.msg
          if (res.errorCode === '000000') {
            if (res.record.code === '0') {
              this.$message.success(str)
              this.getSiteList(1)
            } else if (res.record.code === '2') {
              this.$message.info(str)
            } else {
              this.$message.error(str)
              this.getSiteList(1)
            }
          } else {
            this.$message.error(res.msg || res.record.msg)
          }
        })
    },
    printOrder(id) {
      const venueId = sessionStorage.getItem('venueId')
      printOrder({
        param: { venueId, templateCode: 'SITETPML', workId: id }
      })
        .then(res => {
          if (res.errorCode === '000000') {
            this.$message.success('打印成功')
            this.operation = false
          }
        })
    },
    pdgj() {
      allConfigList({ param: { type: '2', code: '1' }})
        .then(res => {
          if (res.errorCode !== '000000') return
          const arr = res.recordList
          arr.forEach(e => {
            e.label = e.name
          })
          this.queryFormConfig.formItems[3].options = arr
          this.allPayMethedList = arr
        })
        .catch(err => {
          console.log(err)
        })
    },
    clearList() {
      this.filters = {}
      // this.$set(this.filters, 'time', [parseTime(new Date()).slice(0, 10), parseTime(new Date()).slice(0, 10)])
      this.getSiteList(1)
    },
    getSiteList(page) {
      const { filters, pagination } = this
      const venueId = sessionStorage.getItem('venueId')
      if (page) {
        pagination.page = page
        this.pagination.page = Number(page)
      }
      if (filters.time && filters.time.length > 0) {
        filters.startDate = filters.time[0] + ' 00:00:00'
        filters.endDate = filters.time[1] + ' 23:59:59'
      } else {
        filters.startDate = parseTime(new Date()).slice(0, 10) + ' 00:00:00'
        filters.endDate = parseTime(new Date()).slice(0, 10) + ' 23:59:59'
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      siteOrderListPc({ pagination, param: { venueId, ...filters }}).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.list = res.recordList
          this.total = res.totalCount
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    deletelBtn(e) {
      deleteUserReserveRecord({ param: { reserveAndOrderId: e.id }})
        .then(res => {
          if (res.errorCode === '000000') {
            this.$message.success('删除成功')
            this.getSiteList(1)
          } else {
            this.$message.success(res.errorMsg)
          }
        })
    },
    cancelBtn(e) {
      const that = this
      this.$confirm('确认取消预定, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          cancelReserve({ param: { reserveAndOrderId: e.id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('取消预定成功')
              that.getSiteList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    unsubscribeOrderBtn(e) {
      const that = this
      this.$confirm('确认场地退订, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        callback: () => {},
        beforeClose: (action, ctx, close) => {
          if (action !== 'confirm') {
            close()
            return
          }
          ctx.confirmButtonLoading = true
          unsubscribeOrder({ param: { reserveAndOrderId: e.id }}).then((res) => {
            ctx.confirmButtonLoading = false
            close()
            if (res.errorCode === '000000') {
              that.$message.success('场地退订成功')
              that.getSiteList(1)
            }
          })
            .catch(() => { ctx.confirmButtonLoading = false })
        }
      }).finally(() => {})
    },
    changePriceClick() {
      if (this.change === 0) {
        this.change = 1
      } else {
        this.change = 0
      }
    },
    paymentShow(cnt) {
      this.$refs.child.continuePay(cnt, 'areaSellOrder')
    },
    changePayMothed(item) {
      if (this.payMethod === item.value) {
        return
      }
      this.integralUse = '0'
      this.payMethod = item.value
      this.getOrderPrice()
    }
  }
}
</script>

